<template lang="html">
  <div id="" class="">
    <span class="shadow"></span>
    <div class="showDiv">
      <ul class="">
        <li>设置头像</li>
        <li>
          <mo-upload flag="'thumbnail'" :imgType="0" @complete="uploadComplete">
            拍照
            <!-- <input id="input-file" type="file" accept="image/*" capture="camera"/> -->
          </mo-upload>
        </li>
        <li>
          <mo-upload flag="'thumbnail'" :imgType="1" @complete="uploadComplete">
          去相册选择
          <!-- <input id="input-file" type="file" accept="image/*"/> -->
          </mo-upload>
        </li>
      </ul>
      <button type="button" name="button" class="blockBtn" @click="pickerHeaderCK">取消</button>
    </div>
  </div>
</template>

<script>
import MoUpload from './upload.vue';
export default {
  name:'',
  data: () => ({
    userImg:'',
  }),
  components: {
    MoUpload,
  },
  methods: {
    pickerHeaderCK() {
      this.$emit('pickerHeaderCK');
    },
    // 七牛图片上传处理
    uploadComplete(status, result, uploadResult, flag, imgType) {
       // var addr = 'http://opf2ucy0n.bkt.clouddn.com/';
       console.log(uploadResult);
      console.log(result);
        if (status == 200) { 
          let userImg = uploadResult.link+'/'+result.key;
          this.$emit('userImg',userImg);
            // this.thumbnail.push(uploadResult.link+'/'+result.key) //七牛域名 + 返回的key 组成文件url
        } else {
            //失败处理
        }
    },
  }
}
</script>

<style lang="scss" scoped>

.shadow{
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  width: 100%;
}
.showDiv{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 90%;
  ul{
    background: white;
    border-radius: 10px;
    margin-bottom: 10px;
    padding:0 20px;
    li{
      border-bottom: 1px solid $borderColor;
      line-height: 60px;
      text-align: center;
      position: relative;
      &:first-child{
        color:$lightColor;
      }
      input{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
}
</style>
